<template>
    <div class="carousel-add-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>添加轮播图</span>
            </div>

            <el-form :model="form" :rules="rules" ref="carouselForm" label-width="120px">
                <!-- 轮播图标题 -->
                <el-form-item label="轮播图标题" prop="title">
                    <el-input v-model="form.title" placeholder="请输入轮播图标题"></el-input>
                </el-form-item>

                <!-- 轮播图描述 -->
                <el-form-item label="描述信息" prop="description">
                    <el-input
                            type="textarea"
                            :rows="3"
                            v-model="form.description"
                            placeholder="请输入轮播图描述信息">
                    </el-input>
                </el-form-item>

                <!-- 图片上传 -->
                <el-form-item label="轮播图片" prop="imageUrl">
                    <el-upload
                            name="photo"
                            class="avatar-uploader"
                            action="http://localhost:8888/product/upload"
                    :show-file-list="false"
                    :on-success="handleImageSuccess"
                    :before-upload="beforeImageUpload">
                    <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div class="upload-tip">建议尺寸：1920×600像素，大小不超过2MB</div>
                </el-form-item>

                <!-- 跳转链接 -->
                <el-form-item label="跳转链接" prop="redirectUrl">
                    <el-input v-model="form.redirectUrl" placeholder="请输入点击后跳转的链接"></el-input>
                </el-form-item>


                <!-- 是否启用 -->
                <el-form-item label="是否启用" prop="isActive">
                    <el-switch
                            v-model="form.isActive"
                            active-text="启用"
                            inactive-text="禁用">
                    </el-switch>
                </el-form-item>

                <!-- 操作按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="submitForm">立即创建</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'CarouselAdd',
    data() {
        return {
            form: {
                title: '',
                description: '',
                imageUrl: '',
                redirectUrl: '',
                isActive: true
            },
            rules: {
                title: [
                    { required: true, message: '请输入轮播图标题', trigger: 'blur' },
                    { max: 100, message: '长度不能超过100个字符', trigger: 'blur' }
                ],
                description: [
                    { max: 255, message: '长度不能超过255个字符', trigger: 'blur' }
                ],
                imageUrl: [
                    { required: true, message: '请上传轮播图片', trigger: 'blur' }
                ],
                redirectUrl: [
                    { type: 'url', message: '请输入正确的URL地址', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        // 图片上传成功回调
        handleImageSuccess(res, file) {
            // 假设返回的res中有imageUrl字段
            this.form.imageUrl = res
            this.$message.success('图片上传成功')
        },

        // 图片上传前校验
        beforeImageUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
                this.$message.error('上传图片只能是 JPG/PNG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        },

        // 提交表单
        submitForm() {
            this.$refs.carouselForm.validate(valid => {
                if (valid) {
                    // 这里调用API接口提交数据
                    this.$axios.post('/carousel/add', this.form)
                        .then(response => {
                            this.$message.success('添加成功')
                            this.$router.push('carouselInfo') // 跳转到列表页
                        })
                        .catch(error => {
                            this.$message.error('添加失败: ' + error.message)
                        })
                } else {
                    this.$message.error('请检查表单填写是否正确')
                    return false
                }
            })
        },

        // 重置表单
        resetForm() {
            this.$refs.carouselForm.resetFields()
        }
    }
}
</script>

<style scoped>
.carousel-add-container {
    padding: 20px;
}

.box-card {
    max-width: 1000px;
    margin: 0 auto;
}

.avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 150px;
}

.avatar-uploader:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 150px;
    line-height: 150px;
    text-align: center;
}

.avatar {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.upload-tip {
    font-size: 12px;
    color: #909399;
    margin-top: 7px;
}

.sort-tip {
    font-size: 12px;
    color: #909399;
    margin-left: 10px;
}
</style>